package com.abc.robot01.activity.compose

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.ShapeDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.Green
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.abc.robot01.R
import com.abc.robot01.activity.CustomStyledTextField
import com.abc.robot01.activity.MyFont_Size
import com.abc.robot01.activity.px

class BasicTextFieldDemo : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier.fillMaxSize()




            ) {
                // 背景图片
                Image(
                    painter = painterResource(id = R.drawable.z1), // 替换为你的图片资源ID
                    contentDescription = null,
                    contentScale = ContentScale.Crop, // 使图片填充整个背景
                    modifier = Modifier.matchParentSize() // 使图片铺满整个Box
                )
            val scrollState = rememberScrollState()
            Column(
                modifier = Modifier
                    .verticalScroll(scrollState)
                    .fillMaxSize()
                    .offset(x = 20.dp)
            ) {
//                Spacer(modifier = Modifier.height(20.dp))
////                TextWithGrayBackground()
////                CustomStyledTextField("123",placeHolder = "1")
//                Spacer(modifier = Modifier.height(2.dp))

                val focusRequester = remember { FocusRequester() }
                var text by remember { mutableStateOf("Type here...") }

                BasicTextField(
                    modifier = Modifier.focusRequester(focusRequester).focusable(),
                    value = text,
                    onValueChange = { text = it },
                    textStyle = TextStyle(fontSize = 18.sp)
                )

                Button(onClick = {
                    focusRequester.requestFocus()
                },
                ) {
                    Text(text = "Button")
                }





//                SimpleTextField()
                Spacer(modifier = Modifier.height(2.dp))
//                TextFieldWithPlaceholder()
                Spacer(modifier = Modifier.height(2.dp))
//                TextFieldWithPlaceholder2()
                Spacer(modifier = Modifier.height(2.dp))
//                TextFieldWithPlaceholder3()
                Spacer(modifier = Modifier.height(2.dp))
//                RoundedCornerTextField()
                Spacer(modifier = Modifier.height(2.dp))
//                RoundedCornerTextField2()
                Spacer(modifier = Modifier.height(2.dp))
//                RoundedCornerTextField3()
                Spacer(modifier = Modifier.height(2.dp))
//                RoundedCornerTextField4()
                Spacer(modifier = Modifier.height(2.dp))
                Spacer(modifier = Modifier.height(2.dp))
                Spacer(modifier = Modifier.height(2.dp))
                Spacer(modifier = Modifier.height(2.dp))

            }}
        }
    }
}


@Composable
fun BasicTextFieldDemo01() {

}


@Composable
fun TextWithGrayBackground() {
    Text(
        text = "This is some text with a gray background.",
        modifier = Modifier
            .background(Color.LightGray) // Set the background color
            .padding(16.dp), // Set padding around the text
        color = Color.Black // Set the text color (optional)
    )
}



@Composable
fun TextFieldWithPlaceholder3() {
    var text by remember { mutableStateOf("搜索") }
    Box(
        modifier = Modifier
            .size(400.px, 50.px)
            .background(Color.White, shape = RoundedCornerShape(1.dp))
//            .border(0.dp, Color.Gray, shape = RoundedCornerShape(8.dp))
//            .padding(8.dp)
    ){
        BasicTextField(
            singleLine = true,
            modifier = Modifier.background(Color.White),
            value = text,
            onValueChange = { text = it },
            decorationBox = { innerTextField ->
                Row {
                    innerTextField()
                    Icon(
                        imageVector = Icons.Default.Search,
                        contentDescription = "Search Icon",
                        modifier = Modifier.size(24.dp)
                    )
                }
            }
        )
    }
}




@Composable
fun SimpleTextField() {
    var text by remember { mutableStateOf("Enter text") }
    BasicTextField(
        value = text,
        onValueChange = { text = it }
    )
}

@Composable
fun TextFieldWithPlaceholder() {
    var text by remember { mutableStateOf("") }
    BasicTextField(
        value = text,
        onValueChange = { text = it },
        decorationBox = { innerTextField ->
            if (text.isEmpty()) {
                Text("Enter text...", color = Color.Gray)
            }
            innerTextField()
        }
    )
}

@Composable
fun TextFieldWithPlaceholder2() {
    var text by remember { mutableStateOf("") }
    BasicTextField(
        value = text,
        onValueChange = { text = it },
        decorationBox = { innerTextField ->
            Row {
                innerTextField()
                Text(text = "你好")
            }
      
        }
    )
}

@Composable
fun RoundedCornerTextField() {
    var text by remember { mutableStateOf("") }
    BasicTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .background(Color.LightGray, shape = RoundedCornerShape(3.dp))
            .padding(16.dp)
    )
}

@Composable
fun RoundedCornerTextField2() {
    var text by remember { mutableStateOf("") }
    BasicTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .background(Color.LightGray, shape = RoundedCornerShape(3.dp))
            .padding(1.dp)
    )
}

@Composable
fun RoundedCornerTextField3() {
    var text by remember { mutableStateOf("") }
    BasicTextField(
        value = text,
        singleLine = true,
        maxLines = 1,
        onValueChange = { text = it },
        modifier = Modifier
            .width(374.px)
            .background(Color.LightGray, shape = RoundedCornerShape(3.dp))
            .padding(1.dp)
    )
}


@Composable
fun RoundedCornerTextField4() {
    var text by remember { mutableStateOf("") }
    BasicTextField(
        value = text,
        singleLine = true,
        maxLines = 1,
        onValueChange = { text = it },
        modifier = Modifier
            .width(374.px)
            .height(50.px)
            .background(Color.LightGray, shape = RoundedCornerShape(3.dp))
            .padding(1.dp),
                decorationBox = { innerTextField ->
            Row {
                innerTextField()
                Text(text = "你好")
            }

        }
    )
}



@Composable
fun CustomStyledTextField30(text:String,
                          size:DpSize= DpSize(374.px, 50.px),
                          onValueChange: (String) -> Unit = {} ,
                          fontSize:TextUnit = MyFont_Size ,
                          placeHolder:String ,
                          search: Boolean= true,click:((String)->Unit)={}
) {
    Log.e("CustomStyledTextField", "text.value: ${text}");

    var text  =  remember { mutableStateOf(text) }
    // Define the text style with desired font size
    val textStyle = TextStyle(
        fontSize = fontSize, // Set the font size here
        fontWeight = FontWeight.Thin // You can adjust font weight as needed
    )

    Box(
        contentAlignment=Alignment.Center,
        modifier = Modifier
            .size(size)
            .background(Color(0x66ffffff), shape = RoundedCornerShape(15))
//            .border(1.dp, Color.Gray, shape = RoundedCornerShape(1.dp))
            .padding(1.dp)
            .padding(start = 2.dp)
    ) {
        // Placeholder text
//        if (text.value.isEmpty()) {
//            Text( modifier = Modifier.align(Alignment.CenterStart),
//                text = placeHolder,
//                style = TextStyle(color = Color.Gray, fontSize = 24.mysp)
//            )
//        }

        BasicTextField(
            modifier = Modifier
                .focusable()
                .onFocusChanged {
//                    if (it.isFocused) {
//                        LocalSoftwareKeyboardController.current.show()
//                    }
                },
            textStyle = textStyle,
            value = text.value,
            onValueChange = {
                Log.e(" onValueChange", "onValueChange $it");
                text.value = it
                onValueChange(it)
            },
            cursorBrush = SolidColor(Color.Black),
            singleLine = false,
            maxLines = 10,
            decorationBox = { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // Place the text field
                    Box(modifier = Modifier.weight(1f)) {
                        innerTextField()
                    }
//                    if (search) {
//                        // Add an icon at the end
//                        Box(
//                            modifier = Modifier.background(
//                                Color.Blue,
//                                shape = RoundedCornerShape(15)
//                            ).clickable { click(text.value) }) {
//                            Icon(
//                                imageVector = Icons.Default.Search,
//                                tint = Color.White,
//                                contentDescription = "Search Icon",
//                                modifier = Modifier.size(24.dp)
//                            )
//                        }
//                    }
                }
            }
        )
    }
}


@Composable
fun FocusableButtonDemo() {
    // 用于请求焦点
    val focusRequester = remember { FocusRequester() }
    // 记录是否处于焦点状态
    var isFocused by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        // Button 组件
        Button(
            onClick = { /* 点击操作 */ },
            modifier = Modifier
                .focusRequester(focusRequester) // 关联焦点请求器
                .onFocusChanged { focusState ->
                    // 更新聚焦状态
                    isFocused = focusState.isFocused
                }
                .background(if (isFocused) Color.Blue else Color.Transparent) // 聚焦时背景变为蓝色
                .padding(8.dp).focusable()
        ) {
            Text(
                text = if (isFocused) "Button Focused" else "Button Not Focused",
                fontSize = 16.sp,
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(16.dp))

        // 请求焦点的触发按钮
        Button(onClick = { focusRequester.requestFocus() }) {
            Text("Request Focus")
        }

        // 清除焦点的触发按钮
        Button(onClick = { focusRequester.freeFocus() }) {
            Text("Clear Focus")
        }
    }
}
























